<template>
  <ScreenLayout>
    <div class="page-wrap">
      <div class="top-row">
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="leftForm" />
          </DCard>
        </div>
        <div class="cell">
          <DCard
            title="示波器"
            :headerStyle="{
              'background-size': 'contain',
              'background-repeat': 'no-repeat'
            }"
          >
            <SelectLineChart v-model="rightForm" />
          </DCard>
        </div>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup name="Burden">
import ScreenLayout from '@/components/ScreenLayout.vue'
import DCard from '@/components/DCard.vue'
import SelectLineChart from '@/components/SelectLineChart.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'

const leftForm = ref(['204'])
const rightForm = ref(['85','86','87'])

</script>

<style lang="scss" scoped>
// 循环旋转动画
@keyframes rotate {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
.page-wrap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .top-row {
    width: 100%;
    height: 70%;
    display: flex;
    gap: 20px;
    .cell {
      width: 50%;
      height: 100%;
      background: linear-gradient(
        180deg,
        RGBA(6, 39, 75, 1) 0%,
        RGBA(6, 39, 75, 1) 60%,
        RGBA(6, 39, 75, 0) 100%
      );
    }
  }
  .bottom-row {
    width: calc(100% - 400px);
    height: 30%;
    margin: 0 200px;
    background: linear-gradient(
      180deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 60%,
      RGBA(6, 39, 75, 0) 100%
    );
    .list {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 100%;
      .item {
        flex: 1;
        height: 100%;
        position: relative;
        .bg {
          position: absolute;
          left: 60%;
          transform: translateX(-50%);
          height: 100%;
          aspect-ratio: 1/1;
          animation: rotate 10s linear infinite;
        }
        .value {
          position: absolute;
          left: 60%;
          transform: translateX(-50%);
          height: 100%;
          aspect-ratio: 1/1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          font-weight: bold;
        }
        .label {
          font-size: 24px;
          text-align: center;
          position: absolute;
          left: 20px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
